﻿import QtQuick 2.0

Rectangle {
    property int px:0
    property int py:0
    property bool show:false

    id:root
    width: 300
    height: 299
    color:"transparent"
    visible:show
    MouseArea
    {
        id:mouseValue
        anchors.fill: parent
    }

    //定义放大宽倍数
    property double x_enl:1.5
    //定义放大高倍数
    property double y_enl:1.5

    transform: Scale { origin.x: 0; origin.y: 0; xScale: root.x_enl-0.3;yScale: root.y_enl-0.3}
    Image{
    width:parent.width
    height:parent.height
    source:"./切图/弹窗/bg.png"
    }
    MouseArea{
        anchors.fill: parent
    }

    APPCloseMenu{
        id:closeIco
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.topMargin: 7
        anchors.rightMargin: 12
        onClose:{
            root.visible = false
        }
    }
    Image{
        id:chartIco
         anchors.right:closeIco.left
         anchors.top:closeIco.bottom
         anchors.rightMargin:10
         anchors.topMargin:10
        source:"./切图/弹窗/表格.png"
        MouseArea{
            hoverEnabled: true
            anchors.fill:parent
            onEntered: chartIco.source="./切图/弹窗/表格触碰点击.png"
            onExited:  chartIco.source="./切图/弹窗/表格.png"
        }
    }
   Image{
        id:chart2Ico
        source:"./切图/弹窗/图表.png"
        anchors.right:chartIco.left
        anchors.top:chartIco.top
        anchors.rightMargin:20
        MouseArea{
            hoverEnabled: true
            anchors.fill:parent
            onEntered: chart2Ico.source="./切图/弹窗/图表触碰.png"
            onExited:  chart2Ico.source="./切图/弹窗/图表.png"
        }
    }
    Text{
        id:cityInfo
        anchors.bottom:chart2Ico.bottom
        anchors.left:parent.left
        anchors.leftMargin:20
        text:"   详情："
        font.pixelSize: 18
        color:"white"
        font.family: "微软雅黑"
    }
    Text{
        id:data1
        anchors.bottom:cityInfo.bottom
        anchors.left:cityInfo.right
        anchors.leftMargin:10
        text:""
//         text:"1111111111"
        font.pixelSize: 21
        color:"white"
        font.family: "微软雅黑"
    }

    Rectangle{
        id:weatherData
        width:5
        height:180
        color:"transparent"
//         color:"red"
        anchors.left:parent.left
        anchors.leftMargin:10
        anchors.bottom:parent.bottom
        anchors.bottomMargin:40
//        ListView{
//            id:weatherDataView
//            width:parent.width
//            height:parent.height
//            model:weatherDataModel
//            delegate:weatherDataCpt
//            interactive:false
//            clip:true
//        }

    }


    ListModel{
        id:weatherDataModel
         Component.onCompleted:
        {
//            addData();
        }

    }
    //风度 温度 等值
    Component{
       id:weatherDataCpt
       Row{
            width:parent.width
            anchors.left:parent.left
            Text{
            id:textname
            text:name+': '
            color:"white"
            lineHeight:1.8
            font.pixelSize: 16
            font.family: "微软雅黑"
            }

            Text{
            text:value
            color:"white"
            lineHeight:1.8
            font.pixelSize: 16
            font.family: "微软雅黑"
            }
       }
    }

    Rectangle{
        id:indexData
        width:225
        height:180
        color:"transparent"
//        anchors.left:weatherData.right
//        anchors.leftMargin:15
//        anchors.bottom:weatherData.bottom
//        anchors.centerIn: parent
//        anchors.top :weatherData.top
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenterOffset: 20
        Row{
            id:indexData1
            width:parent.width-10
            height:(parent.height-20)/3
            anchors.left:parent.left
            anchors.leftMargin:5
            spacing:10
            //aqi
            Rectangle{
                width:(parent.width-10)/2
                height:parent.height
//                color:"white";
                color: "#ececec"
                Rectangle{
                    id:aqiBG
                    anchors.top:parent.top
                    anchors.left:parent.left
                    width:parent.width
                    height:parent.height/2
                    Text{
                        id:aqiText
                        anchors.centerIn: parent
                        text:""
                        font.pixelSize: 15
                        font.family: "微软雅黑"
//                        color: setTextColor(parseFloat(value),name)
                    }
                }
                Text{
                    id:aqiValue
                    text:""
                    anchors.bottom:parent.bottom
                    anchors.bottomMargin:2
                    anchors.horizontalCenter: parent.horizontalCenter
                    font.pixelSize: 18
                    font.family: "微软雅黑"

                }
            }
            //空气质量
            Rectangle{
                width:(parent.width-10)/2
                height:parent.height
//                color:"white";
                color: "#ececec"
                Rectangle{
                    id:airBG
                    anchors.top:parent.top
                    anchors.left:parent.left
                    width:parent.width
                    height:parent.height/2
                    Text{
                        id:airQLtext
                        anchors.centerIn:parent
                        font.pixelSize: 15
                        text:"空气质量"
                        font.family: "微软雅黑"
                    }
                }
                Text{
                    id:airQLValue
                    text:""
                    anchors.bottom:parent.bottom
                    anchors.bottomMargin:5
                    anchors.horizontalCenter: parent.horizontalCenter
                    font.pixelSize: 16
                    font.family: "微软雅黑"

                }
            }
        }

        GridView{
			id:indexDataView
            width:parent.width
            height:(parent.height-20)/3*2
            cellHeight: (height+20)/2
            cellWidth:width/3
            anchors.top:indexData1.bottom
            anchors.topMargin: 10
            anchors.left:parent.left
            anchors.leftMargin:5
            model:indexDataModel
            delegate:indexDataCpt
            interactive:false


        }


   }
	ListModel{
        id:indexDataModel
        Component.onCompleted:
        {
//            addData();
        }

    }

    Component{
      id:indexDataCpt
      //底下小矩形
      Rectangle{
               width:indexDataView.cellWidth-10
               height: indexDataView.cellHeight-10
//               color:"white"
               color: "#ececec"
               Rectangle{
                   anchors.top:parent.top
                   anchors.left:parent.left
                   width:parent.width
                   height:parent.height/2
                   color:setColor(parseFloat(value),name)
                   Text{
                       id:nameData
                       text:name
                       font.pixelSize: 16
                       anchors.centerIn:parent
                       font.family: "微软雅黑"
                       color: setTextColor(parseFloat(value),name)
                   }
               }
               Text{
                   id:valueData
                   text:value
                   anchors.bottom:parent.bottom
                   anchors.bottomMargin:2
                   anchors.horizontalCenter: parent.horizontalCenter
                   font.pixelSize: 18
                    font.family: "微软雅黑"

               }
           }
   }

   function  addData(){

        var _allData = mainApp.slotGetAnnoInfo();
        var _json= JSON.parse(_allData);
        var len=_json.length;
        if(len===0){
            show=false;
        }
        else{
            data1.text="";
            px=py=0;
            weatherDataModel.clear();
            aqiText.text="";
            aqiValue.text="";
            aqiBG.color="white";
            airBG.color="white";
            airQLValue.text="";
            indexDataModel.clear();

            data1.text=_json[0].name;
            px=parseInt(_json[1].value)-root.width/2-7;
            py=parseInt(_json[2].value)-root.height;

            for(var i=3;i<len;i++){
               if(i<9)
               {
                   weatherDataModel.append({"name":_json[i].name,"value":_json[i].value});
               }
               else if(i<10){
                   aqiText.text=_json[i].name;
                   aqiValue.text=_json[i].value;
                   aqiBG.color=setColor(_json[i].value,_json[i].name);
                   airBG.color=aqiBG.color;
                   aqiText.color = setTextColor(_json[i].value,_json[i].name);
                   airQLtext.color = aqiText.color
                   airQLValue.text=setClass(_json[i].value);

               }
               else
               {
                   indexDataModel.append({"name":_json[i].name,"value":_json[i].value});
               }
            }
            show=true;
        }
    }




     function setLevel(type){
     var level=new Array;
        switch(type){
            case 'AQI':
                return level=[50,100,150,200,300];//aqi
            case 'PM2.5':
                return level=[35,75,115,150,250];//pm2.5
            case 'PM10':
                return level=[50,150,250,350,420];//pm10
            case 'SO2':
                return level=[50,150,475,800,1600];  //so2
            case 'NO2':
                return level=[40,80,180,280,565];  //no2
            case 'CO':
                return level=[2,4,14,24,36];  //co
            case 'O3':
                return level=[100,160,215,265,800];    //o3
        }
     }
    function setClass(_value){
        var value=parseFloat(_value)
        var level=[50,100,150,200,300];
        var aqiClass=['优','良','轻度污染','中度污染','重度污染','严重污染',];
        if(value<level[0])  return  aqiClass[0];
         else if(value<level[1]) return  aqiClass[1];
         else if(value<level[2]) return  aqiClass[2];
         else if(value<level[3]) return  aqiClass[3];
         else if(value<level[4]) return  aqiClass[4];
         else  return  aqiClass[5];

    }

    function setTextColor(value02,type02)
    {
        var level=[];
        level=setLevel(type02);
        var color=[];
        color[0]="#444444";
        color[1]="#444444";
        color[2]="#444444";
        color[3]="#444444";
        color[4]="#ffffff";
        color[5]="#ffffff";
        if(value02<level[0])  return color[0];
        else if(value02<level[1]) return color[1];
        else if(value02<level[2]) return color[2];
        else if(value02<level[3]) return color[3];
        else if(value02<level[4]) return color[4];
        else  return color[5];
    }

    function setColor(value,type){
        var level=[];
        level=setLevel(type);
        var color=[];
//        color[0]=Qt.rgba(0,288,0,1);
//        color[1]=Qt.rgba(255,255,0,1);
//        color[2]=Qt.rgba(255,126,0,1);
//        color[3]=Qt.rgba(255,0,0,1);
//        color[4]=Qt.rgba(153,0,76,1);
//        color[5]=Qt.rgba(126,0,35,1);
//        color[0]=Qt.rgba(87,208,26,1);
//        color[1]=Qt.rgba(244,220,44,1);
//        color[2]=Qt.rgba(235,136,30,1);
//        color[3]=Qt.rgba(241,89,22,1);
//        color[4]=Qt.rgba(254,26,26,1);
//        color[5]=Qt.rgba(180,0,85,1);
        color[0]="#57d01a";
        color[1]="#f4dc2c";
        color[2]="#eb881e";
        color[3]="#f15916";
        color[4]="#fe1a1a";
        color[5]="#b40055";
        if(value<level[0])  return color[0];
        else if(value<level[1]) return color[1];
        else if(value<level[2]) return color[2];
        else if(value<level[3]) return color[3];
        else if(value<level[4]) return color[4];
        else  return color[5];
    }

     Connections
     {
         target:mainApp
         onSignalShowAnnoInfo:
         {
//            addData();
         }
     }
     Connections
     {
         target:earthView
         onSignalCloseAnnoInfo:
         {
            if(mouseValue.mouseX===0 &&  mouseValue.mouseY===0)
            {
                 show=false;
            }




         }
     }
}

